import 'dart:async';
import 'package:get/get.dart';
import 'package:flutter/material.dart';
import 'package:get/get_connect/http/src/utils/utils.dart';
import 'package:myshop/app/utils/storage/storage.dart';
import '../../../utils/screenAdapter.dart';
import '../../../models/goodsdetail_model.dart';
import '../../../service/HttpsClient.dart';
import '../../../utils/storage/cartService.dart';
import '../../../utils/storage/userService.dart';

class GoodsDetailsController extends GetxController {
  //TODO: Implement GoodsDetailsController
  ScrollController scrollController = ScrollController(); // 页面滚动控制器
  HttpsClient httpClient = HttpsClient(); // 请求网络
  RxDouble opacity = 0.0.obs; // 透明度
  RxInt index = 0.obs; // 当前选中的tabbar索引
  RxBool showTabBar = false.obs; // 是否显示tabbar
  GlobalKey gk1 = GlobalKey(); // tabbar的key
  GlobalKey gk2 = GlobalKey(); // tabbar的key
  GlobalKey gk3 = GlobalKey(); // tabbar的key
  double gk2Position = 0; // 第二个详情区域距离appBar位置,会随着滚动而改变（计算详情tabTopbar的偏移量）
  double gk3Position = 0; // 第三个详情区域距离appBar的位置,会随着滚动而改变（计算详情tabTopbar的偏移量）
  RxBool showSubHeader = false.obs; // 是否显示第二区域头部
  RxInt subHeaderIndex = 0.obs; // 第二区域头部选中的索引
  var goodsDetail = GoodsDetailItemModel().obs; // 定义自定义对象的响应式数据
  RxString popUpBottomActions = "".obs; // 底部弹窗操作类型
  RxInt buyCount = 1.obs; // 购买数量
  RxString checkedAttrStr = "".obs; // 选中的属性值

  // 获取不同底部弹窗类型展示
  void getPopUpBottomActions(String type) {
    popUpBottomActions.value = type;
    update();
  }

  // 点击增加数量
  void incrementCount() {
    buyCount.value++;
    update();
  }

  // 减少数量
  void decrementCount() {
    if (buyCount.value > 1) {
      buyCount.value--;
      update();
    }
  }

  // 整理后端返回的字段:整合成Map类型并加上checked属性
  void initAttribute(List<GoodsDetailAttrModel> goodsDetailAttr) {
    // goodsDetailAttr [{"cate": "颜色", "list": ["白色", "黑色", "红色"]}]
    // 需要变成["cate": "颜色", "list": ["白色", "黑色", "红色"], "attrList": []]
    for (int i = 0; i < goodsDetailAttr.length; i++) {
      for (int j = 0; j < goodsDetailAttr[i].list!.length; j++) {
        if (j == 0) {
          // 默认第一个选中
          goodsDetailAttr[i].attrList!.add({
            "title": goodsDetailAttr[i].list![j],
            "checked": true,
          });
        } else {
          goodsDetailAttr[i].attrList!.add({
            "title": goodsDetailAttr[i].list![j],
            "checked": false,
          });
        }
      }
    }
    getCheckedAttrList();
  }

  // 点击立即购买
  void buyNow() async {
    bool loginStatus = await UserService.getUserLoginState();
    if (loginStatus == false) {
      Get.toNamed("/code-login-step-one");
      Get.snackbar("提示", "请先登录");
      return;
    }
    Get.back(); // 关闭底部弹窗
    List tempList = [];
    Map buyGoods = {
      "_id": goodsDetail.value.sId,
      "title": goodsDetail.value.title,
      "price": goodsDetail.value.price,
      "selectedAttr": checkedAttrStr.value,
      "count": buyCount.value,
      "pic": goodsDetail.value.pic,
      "checked": true,
    };
    tempList.add(buyGoods);
    await Storage.setData("checkoutList", tempList);
    Get.toNamed("/checkout");
  }

  // 在已选区域展示选择好的属性
  void getCheckedAttrList() {
    List checkedAttrList = [];
    for (int i = 0; i < goodsDetail.value.attr!.length; i++) {
      for (int j = 0; j < goodsDetail.value.attr![i].attrList!.length; j++) {
        if (goodsDetail.value.attr![i].attrList![j]["checked"] == true) {
          checkedAttrList.add(goodsDetail.value.attr![i].attrList![j]["title"]);
        }
      }
    }
    checkedAttrStr.value = checkedAttrList.join(",");
    update(); // update() 方法是 GetxController 中的方法，用于更新状态，改变UI视图
  }

  // 点击属性选择
  void checkedAttr(String cate, String title) {
    for (int i = 0; i < goodsDetail.value.attr!.length; i++) {
      // 遍历获取到的所有列表数据
      if (goodsDetail.value.attr![i].cate == cate) {
        // 筛选到外层cate再去筛选里层的属性
        for (int j = 0; j < goodsDetail.value.attr![i].attrList!.length; j++) {
          goodsDetail.value.attr![i].attrList![j]["checked"] =
              false; // 先把所有属性都置为false实现单选
          if (goodsDetail.value.attr![i].attrList![j]["title"] == title) {
            goodsDetail.value.attr![i].attrList![j]["checked"] = true;
          } else {
            goodsDetail.value.attr![i].attrList![j]["checked"] = false;
          }
        }
      }
    }
    update(); // 更新UI
  }

  // 点击顶部区域选择后，滚动到对应的位置， 实现锚点定位
  void onChangedIndex(int ind) {
    index.value = ind;
    update(); // 更新UI
    if (ind == 0) {
      // 滚动到商品
      Scrollable.ensureVisible(
        gk1.currentContext as BuildContext,
        duration: Duration(milliseconds: 100), // 100ms滚动到指定位置
        curve: Curves.ease, // 滚动动画
      ); // 滚动到指定绑定了指定key值的容器组件位置
    } else if (ind == 1) {
      // 滚动到详情
      Scrollable.ensureVisible(
        gk2.currentContext as BuildContext,
        duration: Duration(milliseconds: 100),
        curve: Curves.ease,
      );
      // 开启延时定时器 修正位置，在上面滚动完成后立马跳转到指定位置
      Timer.periodic(const Duration(milliseconds: 101), (timer) {
        // 获取滚动后的位置
        // scrollController.jumpTo(scrollController.position.pixels - ScreenAdapter.height(120));
        // timer.cancel(); // 取消定时器
      });
    } else if (ind == 2) {
      // // 滚动到推荐
      // 推荐
      Scrollable.ensureVisible(
        gk3.currentContext as BuildContext,
        duration: Duration(milliseconds: 100),
        curve: Curves.ease,
      );
      // // 开启延时定时器 修正位置，在上面滚动完成后立马跳转到指定位置
      // Timer.periodic(const Duration(milliseconds: 101), (timer) {
      //   // 获取滚动后的位置
      //   scrollController.jumpTo(scrollController.position.pixels - ScreenAdapter.height(120));
      //   timer.cancel(); // 取消定时器
      // });
    }
  }

  // 获取元素距离到appBar底下距离
  void getPosition(double initScroll) {
    RenderBox box2 =
        gk2.currentContext!.findRenderObject()! as RenderBox; // 渲染的Box对象
    RenderBox box3 =
        gk3.currentContext!.findRenderObject()! as RenderBox; // 渲染的Box对象
    gk2Position = box2.localToGlobal(Offset.zero).dy; // 获取元素距离屏幕顶部的距离
    gk3Position = box3.localToGlobal(Offset.zero).dy; // 获取元素距离屏幕顶部的距离
    double statusBarHeight = ScreenAdapter.statusBarHeight(); // 获取状态栏高度
    double appBarHeight = ScreenAdapter.height(120); // 获取appBar高度
    gk2Position =
        gk2Position -
        (statusBarHeight + appBarHeight) +
        initScroll; // 计算元素距离到appBar底下距离
    gk3Position =
        gk3Position -
        (statusBarHeight + appBarHeight) +
        initScroll; // 计算元素距离到appBar底下距离
  }

  // 点击详情区域的subHeaderBar,实现锚点定位
  changedsubHeaderIndex(int ind) {
    subHeaderIndex.value = ind;
    scrollController.jumpTo(gk2Position); // 跳转到指定位置
    update();
  }

  // 监听滚动事件
  void listScrollerHandler() {
    scrollController.addListener(() {
      if (gk2Position == 0 && gk3Position == 0) {
        // 防止重复获取位置
        getPosition(
          scrollController.position.pixels,
        ); // 获取渲染后的元素首次位置，在GetX里面没有对应的生命周期获取，所以只能通过监听滚动事件来获取
      }
      if (scrollController.position.pixels > gk2Position &&
          scrollController.position.pixels < gk3Position) {
        if (showSubHeader.value == false) {
          showSubHeader.value = true;
          index.value = 1;
        }
      } else if (scrollController.position.pixels > 0 &&
          scrollController.position.pixels < gk2Position) {
        if (showSubHeader.value == true) {
          showSubHeader.value = false;
          index.value = 0;
        }
      } else if (scrollController.position.pixels > gk3Position) {
        if (showSubHeader.value == true) {
          showSubHeader.value = false;
          index.value = 2;
        }
      }

      if (scrollController.position.pixels <= 100) {
        opacity.value =
            scrollController.position.pixels /
            100; // 往下滚动100px，透明度变化0-0.978 // 除到100不会为1
        if (showTabBar.value == true) {
          // 当往下拉了之后重新往上拉回到100pz之内, 要设置中间tabbar不显示
          showTabBar.value = false;
        }
        update(); // 更新透明度
      } else {
        // 下拉大于100px时，只能在第一次显示，不会在下拉过程中多次更新
        if (showTabBar.value == false) {
          showTabBar.value = true;
          opacity.value = 1;
          update();
        }
      }
    }); // 监听滚动事件
  }

  // 获取商品详情
  void getGoodsData() async {
    // print(Get.arguments);
    var response = await httpClient.get(
      "api/pcontent?id=${Get.arguments!["goodsId"]}",
    );
    if (response != null) {
      GoodsDetailModel goodsDetailModel = GoodsDetailModel.fromJson(response);
      goodsDetail.value = goodsDetailModel.result!;
      initAttribute(goodsDetail.value.attr!);
      update(); // 更新UI
    }
  }

  // 添加到购物车
  void addCart() {
    CartService.addCartData(
      goodsDetail.value,
      checkedAttrStr.value,
      buyCount.value,
    );
    print("点击了加入购物车");
    Get.back(); // 关闭底部弹窗
    Get.snackbar("提示", "加入购物车成功");
  }

  @override
  void onInit() {
    super.onInit();
    getGoodsData();
    listScrollerHandler();
  }
 
  @override
  void onClose() {
    super.onClose();
  }
}
